<template>
  <div
    class="collapse navbar-collapse w-auto h-auto h-100"
    id="sidenav-collapse-main"
  >
  <div v-if="userIdentity == '0'">
    <ul class="navbar-nav">
      <li class="nav-item">
        <sidenav-item
          url="/facility"
          :class="getRoute() === 'facility' ? 'active' : ''"
          :navText="'Facility'"
        >
          <template v-slot:icon>
            <i
              class="ni ni-calendar-grid-58 text-warning text-sm opacity-10"
            ></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/orders"
          :class="getRoute() === 'orders' ? 'active' : ''"
          :navText="'Order'"
        >
          <template v-slot:icon>
            <i class="ni ni-credit-card text-success text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/user"
          :class="getRoute() === 'user' ? 'active' : ''"
          :navText="'User'"
        >
          <template v-slot:icon>
            <i class="ni ni-bullet-list-67 text-success text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/dashboard-default"
          :class="getRoute() === 'dashboard-default' ? 'active' : ''"
          :navText="'Dashboard'"
        >
          <template v-slot:icon>
            <i class="ni ni-align-left-2 text-success text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      
      <li class="mt-3 nav-item">
        <h6
          class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
          :class="'ms-2'"
        >
        ACCOUNT PAGES
        </h6>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/profile"
          :class="getRoute() === 'profile' ? 'active' : ''"
          :navText="'Profile'"
        >
          <template v-slot:icon>
            <i class="ni ni-single-02 text-dark text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/signin"
          :class="getRoute() === 'signin' ? 'active' : ''"
          :navText="'Sign out'"
          @click="sessionClean"
        >
          <template v-slot:icon>
            <i class="ni ni-single-copy-04 text-danger text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
    </ul>
  </div>
  <div v-else-if="userIdentity == '1'">
    <ul class="navbar-nav">
      <li class="nav-item">
        <sidenav-item
          url="/facility"
          :class="getRoute() === 'facility' ? 'active' : ''"
          :navText="'Facility'"
        >
          <template v-slot:icon>
            <i
              class="ni ni-calendar-grid-58 text-warning text-sm opacity-10"
            ></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/orders"
          :class="getRoute() === 'orders' ? 'active' : ''"
          :navText="'Order'"
        >
          <template v-slot:icon>
            <i class="ni ni-credit-card text-success text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/booking"
          :class="getRoute() === 'booking' ? 'active' : ''"
          :navText="'Booking'"
        >
          <template v-slot:icon>
            <i class="ni ni-books text-success text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="mt-3 nav-item">
        <h6
          class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
          :class="'ms-2'"
        >
          ACCOUNT
        </h6>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/profile"
          :class="getRoute() === 'profile' ? 'active' : ''"
          :navText="'Profile'"
        >
          <template v-slot:icon>
            <i class="ni ni-single-02 text-dark text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          url="/signin"
          :class="getRoute() === 'signin' ? 'active' : ''"
          :navText="'Sign out'"
          @click="sessionClean"
        >
          <template v-slot:icon>
            <i class="ni ni-single-copy-04 text-danger text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
    </ul>
  </div>
  </div>
</template>
<script>
import SidenavItem from "./SidenavItem.vue";
// import SidenavCard from "./SidenavCard.vue";

export default {
  name: "SidenavList",
  props: {
    cardBg: String
  },
  data() {
    return {
      title: "FitZone",
      controls: "dashboardsExamples",
      isActive: "active",
      userIdentity:'1',
    };
  },
  components: {
    SidenavItem,
    // SidenavCard
  },
  methods: {
    getRoute() {
      const routeArr = this.$route.path.split("/");
      return routeArr[1];
    },
    sessionClean(){
      sessionStorage.clear()
    }
    
  },
  mounted(){
    this.userIdentity= sessionStorage.getItem("identity")
    console.log(this.useridentity)
  },
};
</script>
